/**
 * 组件：性别-年龄组件
 * Author:Colin3dmax
 */
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
} from 'react-native';
import Util from '../utils/util';


class CompGenderAge extends Component {

    static propTypes = {
        gender:PropTypes.bool,
        age:PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
    }

    static defaultProps = {
        gender:true,
        age:0,
    }

    constructor(props) {
        super(props)
        this.state = {}
    }

    componentDidMount() {

    }

    genGenderUI(gender) {
        const genderUrl = gender == "1" ? require('../../spe/yuanwangjiaoyou/images/home/man_ico.png') : require('../../spe/yuanwangjiaoyou/images/home/woman_ico.png');
        return (<Image style={styles.genderIcon} source={genderUrl}/>);
    }

    render() {
        const {gender,age} = this.props
        return (
            <View style={styles.userGenderGroup}>
                {this.genGenderUI(gender)}
                <Text style={styles.age}>{age}</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    userGenderGroup: {
        backgroundColor: '#FDDE0B',
        width: 33,
        height:13,
        borderRadius: 4,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 4,
        paddingRight: 4,
        marginRight: 4,
    },
    age: {
        color: 'white',
        fontSize: 11,
        marginLeft:2,
        backgroundColor: 'transparent',
    },
    genderIcon: {
        width: 10,
        height: 10,
    },
});

export default CompGenderAge;